<template>
	<view class="content">
		<!-- logo -->
		<image src="../../static/img/屏幕截图 2024-10-08 173430.png" class="logo" mode="heightFix"></image>
		
		<uni-forms ref="form" :modelValue="form" :rules="rules">
			<uni-forms-item name="phone">
				<view class="input-group">
					<input class="input" v-model="form.phone" placeholder="请输入电话号码" type="number" />
					<uni-icons class="icon left" type="phone-filled" color="#41b883" size="25px"></uni-icons>
					<uni-icons class="icon right" type="clear" size="22px" color="#35495e" @click="clearPhone" />
				</view>
			</uni-forms-item>

			<uni-forms-item name="password">
				<view class="input-group">
					<input class="input" v-model="form.password" placeholder="请输入密码" :password="hidePwd" />
					<uni-icons class="icon left" type="locked-filled" color="#41b883" size="25px"></uni-icons>
					<uni-icons class="icon right" size="22px" color="#35495e"
						:type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" @click="hidePwd = !hidePwd" />
				</view>
			</uni-forms-item>

		
		</uni-forms>

		<button class="btn" @click="register">注册</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				phone: '',
				password: '',
				
			},
			hidePwd: true,
			rules: {
				phone: {
					rules: [{
						required: true,
						errorMessage: '请输入电话'
					}],
					validateTrigger: 'submit'
				},
				password: {
					rules: [{
						required: true,
						errorMessage: '请输入密码'
					}],
					validateTrigger: 'submit'
				},
				
			}
		}
	},
	methods: {
		register() {
		      this.$refs.form.validate().then(res => {
		        
		        uni.request({
		          url: 'http://localhost:8080/letter/users/register',
		          method: 'POST',
		          data: this.form,
		          success: (response) => {
		            console.log('注册成功:', response.data);
		            uni.showToast({
		              title: '注册成功',
		              icon: 'success',
		              duration: 2000
		            });
		            uni.navigateTo({
		            	url:'/pages/login/login'
		            })
		          },
		          fail: (error) => {
		            console.error('注册失败:', error);
		            uni.showToast({
		              title: '注册失败',
		              icon: 'none',
		              duration: 2000
		            });
		            
		          }
		        });
		      }).catch(err => {
		        console.log('表单错误信息：', err);
		      });
		    },
		    clearPhone() {
		      this.form.phone = '';
		    }
		  }
}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: var(--status-bar-height, 0px);
	}

	.logo {
		width: 100px;
		/* 调整为合适的宽度 */
		margin: 20px 0;
		/* 上下边距 */
	}

	.input-group {
		position: relative;
		width: 100%;
		/* 输入框宽度 */
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 5px;
		overflow: hidden;
		/* 确保输入框内的元素不会溢出 */
	}

	.input {
		width: 100%;
		height: 40px;
		padding: 0 70px;
		/* 左右内边距 */
		border: none;
		/* 移除输入框的边框 */
		font-size: 16px;
		box-sizing: border-box;
		/* 确保内联元素的宽度包含padding和border */
	}

	.icon {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		/* 当鼠标悬停时显示手形光标 */
	}

	.left {
		left: 10px;
	}

	.right {
		right: 10px;
	}

	.btn {
		width: 83%;
		height: 40px;
		margin-top: 10px;
		padding: 0 70px;
		background-color: #41b883;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		text-align: center;
		line-height: 40px;
	}

	.find {
		margin-top: 10px;
		color: #35495e;
		text-decoration: none;
	}
</style>